<template>
	<view>
		<div class="ymyy-input">
			<div><text>姓名</text><input type="text" v-model="from.name" placeholder="请输入姓名"></div>
			<div><text>身份证</text><input type="text" v-model="from.id_card" placeholder="请输入身份证"></div>
			<div><text>手机号</text><input type="text" v-model="from.phone" placeholder="请输入手机号"></div>
			<div class="section">
				<view class="section__title">现居地址</view>
				<view class="section">
					<picker @change="bindPickerChange" value="index" mode="region" :range="array">
						<view class="picker">
							:{{array[0]}} {{array[1]}} {{array[2]}}
						</view>
					</picker>
				</view>
			</div>
			<div><text>现居详细地址</text><input type="text" v-model="from.de_address" placeholder="请输入现居详细地址"></div>
			
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				from: {
					name: "",
					id_card: "",
					phone: "",
					address: "",
					de_address: ""
				},
				index: 0,
				array: ["上海", "宝山", "星梦剧院"],
			};
		},
		methods: {
			bindPickerChange(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.array = e.detail.value
			},
			addym(e){
				console.log('picker发送选择改变，携带值为', e.detail.value)
				// this.array = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	.ymyy-input {
		width: 100%;

		>div {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			padding: 10rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #ccc;

			>text {
				display: inline-block;
				width: 40%;
			}

			>imput {
				width: 60%;
				text-align: right;
			}
		}
	}
</style>
